<template>
  <div class="md-example-child md-example-child-steps md-example-child-steps-5">
    <img src="http://www.tbarichman.cn/img/1afe496e6a774c819e040c4a86dcd705.png" style="width:100%"/>
    <md-field title="订购步骤">
    </md-field>
    <md-steps
      :steps="steps"
      :current="currentStep">
    </md-steps>
    <md-field title="商家信息">
      <md-field-item
        name="item0"
        title="商家名称："
        >{{name}}
      </md-field-item>
      <md-field-item
        name="item0"
        title="营业时间："
        >{{yysj}}
      </md-field-item>
        <md-field-item
            name="item0"
            title="联系电话："
            value="${name}"
            >{{mobile}}
      </md-field-item>
      <md-field-item
        name="item0"
        title="商家标签："
        value=""
        ><span v-html="des"></span>
      </md-field-item>
    </md-field>

  </div>
</template>

<script>
import {Steps} from 'mand-mobile'
import {TabBar} from 'mand-mobile'
import {Field, FieldItem, InputItem} from 'mand-mobile'
import { API_BASE } from "@/config";
import axios from "axios";
import { log } from "util";

export default {
  name: 'steps-demo',
  /* DELETE */
  title: '完成全部步骤',
  titleEnUS: 'Complete all steps',
  codeSandBox: 'https://codesandbox.io/s/xl9mykwp3w',
  height: 150,
  /* DELETE */
  components: {
    [Steps.name]: Steps,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
  },
  data() {
    return {
      name: '',
      yysj: '',
      mobile: '',
      des: '',
      id:'',
      steps: [
        {
          name: '查看电话',
        },
        {
          name: '拨打电话',
        },
        {
          name: '送货上门',
        },
        {
          name: '完成',
        },
      ],
      currentStep: 4,
    }
  },
  mounted() {
    var id = this.$route.query.id;
    var url =
            `${API_BASE}/market/v1/product/getProductDetail?id=`;
      return axios.post(url + id).then(response => {
          var product = response.data.data;
          console.log(product)
          this.name = product.appName;
          this.yysj = product.rate;
          this.mobile = product.loanTermStr;
          this.des = product.appDesInfo;
      });
  }
}

</script>

<style lang="stylus">
.md-example-child-steps-5
  height 140px
  font-size 0.4rem
  .md-steps .icon.current::before
    content ''
    color color-primary-tap
    border-bottom 10px solid
    border-left 10px solid transparent
    border-right 10px solid transparent
    position absolute
    top 130px
.orderDiv
  text-align: left;
  font-size: 0.3rem;
  padding-left: 20px;
.md-example-child-field-1
  .md-input-item
    background #FFF
    padding 0 32px
  .strong-tip
    font-size 24px
    color color-text-highlight
</style>
